<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>角色管理</el-breadcrumb-item>
            <el-breadcrumb-item>角色列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="请输角色名称" clearable v-model="name" @clear="searchRole">
                        <el-button slot="append" icon="el-icon-search" @click="searchRole"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="addDialogVisible=true">添加角色</el-button>
                </el-col>
            </el-row>
            <el-table :data="roleList" border stripe>
                <el-table-column type="index"></el-table-column>
                <el-table-column label="角色名称" prop="name"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="warning" size="mini" @click="showEditRoleMenuDialog(scope.row)">菜单权限</el-button>
                        <el-button type="primary" size="mini" @click="showEditDialog(scope.row)">修改</el-button>
                        <el-button type="danger" size="mini" @click="removeRoleById(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[7, 14 , 20, 24]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            ></el-pagination>
        </el-card>
        <!--添加角色-->
        <el-dialog title="添加角色" :visible.sync="addDialogVisible" width="50%" @close="addRoleFormClose">
            <el-form
                    :model="addRoleForm"
                    :rules="addRoleFormRules"
                    ref="addRoleFormRef"
                    label-width="100px"
                    class="demo-ruleForm"
            >
                <el-form-item label="角色名称" prop="name">
                    <el-input v-model="addRoleForm.name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addRole">确 定</el-button>
                <el-button @click="addDialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>
        <!--修改角色-->
        <el-dialog
                title="修改角色"
                :visible.sync="editDialogVisible"
                width="50%"
                @close="editRoleFormClose"
        >
            <el-form
                    :model="editRoleForm"
                    :rules="editRoleFormRules"
                    ref="editRoleFormRef"
                    label-width="100px"
                    class="demo-ruleForm"
            >
                <el-form-item label="角色名称" prop="name">
                    <el-input v-model="editRoleForm.name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="editRole">确 定</el-button>
                <el-button @click="editDialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>
        <!-- 授权对话框  -->
        <el-dialog
            title="菜单权限"
            :visible.sync="editRoleMenuDialogVisible"
            width="50%"
            @close="editRoleMenuPermissionFormClose"
        >
            <el-form
                :model="editRoleMenuPermissionForm"
                :rules="editRoleMenuPermissionFormRules"
                ref="editRoleMenuPermissionFormRef"
                label-width="100px"
                class="demo-ruleForm"
            >
                <el-form-item label="角色ID" prop="roleId">
                    <el-input v-model="editRoleMenuPermissionForm.id" disabled></el-input>
                </el-form-item>
                <el-form-item label="角色名称" prop="roleName">
                    <el-input v-model="editRoleMenuPermissionForm.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="菜单权限" prop="roleMenu">
                    <el-tree
                        :data="menuList"
                        show-checkbox
                        default-expand-all
                        node-key="id"
                        ref="roleMenuTree"
                        highlight-current
                        :props="defaultProps"
                        :defaultCheckedKeys="rolePerMenu"
                        :checkStrictly="true"
                    ></el-tree>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="editRoleMenu">确 定</el-button>
                <el-button @click="cancelRoleMenu">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                editRoleMenuPermissionFormRules:{},
                addRoleFormRules:{},
                editRoleFormRules:{},
                editRoleMenuDialogVisible:false,
                addDialogVisible: false,
                editDialogVisible: false,
                pageNum: 1,
                pageSize: 7,
                name: "",
                roleList: [],
                total: 0,
                addRoleForm: {
                    name: ""
                },
                editRoleForm: {
                    id: -1,
                    name: ""
                },
                menuList:[],
                editRoleMenuPermissionForm:{
                    id:'',
                    name:'',
                    roleIds:'',
                },
                rolePerMenu:[],
                defaultProps:{
                    label:'name',
                    children:'children'
                },
            };
        },
        methods: {
            editRoleMenuPermissionFormClose(){
                //关闭对话框清理数据
                this.rolePerMenu=[];
                this.editRoleMenuPermissionForm = {};

                this.$refs.roleMenuTree.setCheckedKeys([]);
                this.editRoleMenuDialogVisible = false ;
            },
            //取消授权框
            cancelRoleMenu(){
                this.rolePerMenu=[];
                this.editRoleMenuPermissionForm = {};

                this.$refs.roleMenuTree.setCheckedKeys([]);
                this.editRoleMenuDialogVisible=false;
            },
            //给角色授权
            editRoleMenu(){
                let ids =this.$refs.roleMenuTree.getCheckedKeys();
                console.log(ids)
                this.editRoleMenuPermissionForm.roleIds=ids.join(",")
                let url = this.$baseUrl.baseUrl+"role/modifyPer";
                this.$axios.put(url,{
                    id:this.editRoleMenuPermissionForm.id,
                    roleIds:this.editRoleMenuPermissionForm.roleIds,
                }).then(res=>{
                    if(res.data.code==200){
                        this.rolePerMenu=[];
                        this.editRoleMenuPermissionForm={};
                        this.$refs.roleMenuTree.setCheckedKeys([]);
                        this.editRoleMenuDialogVisible=false;
                        alert(res.data.msg);
                    }else {
                        this.rolePerMenu=[];
                        this.editRoleMenuPermissionForm={};
                        this.$refs.roleMenuTree.setCheckedKeys([]);
                        alert(res.data.msg);
                    }
                })
            },
            // 删除角色信息
            removeRoleById(id) {
                let url = this.$baseUrl.baseUrl+"role/del/"+id;
                this.$axios.delete(url).then(res=>{
                    alert(res.data.msg);
                    this.getRoleList();
                })

            },
            //编辑角色
            showEditDialog(row) {
                this.editDialogVisible = true;
                this.editRoleForm.id = row.id;
                this.editRoleForm.name = row.name;
            },
            editRoleFormClose() {
                this.$refs.editRoleFormRef.resetFields();
            },
            showEditRoleMenuDialog(row){
                this.editRoleMenuDialogVisible = true ;
                this.editRoleMenuPermissionForm.id = row.id;
                this.editRoleMenuPermissionForm.name = row.name

                //初始化 角色拥有的菜单
                let url = this.$baseUrl.baseUrl+"permission/initMenuByRole/"+row.id

                this.$axios.get(url)
                    .then(res=>{
                        if(res.data.code==200){
                        this.rolePerMenu = res.data.data;
                    }
                })
            },
            //修改角色名称
            editRole() {
                let url= this.$baseUrl.baseUrl+"role/modify"
                this.$axios.put(url,{
                    id:this.editRoleForm.id,
                    name:this.editRoleForm.name
                }).then(res=>{
                    if(res.data.code==200){
                        this.editDialogVisible=false,
                            this.$message({
                                message:res.data.msg,
                                type:'success',
                                duration:1000
                            })
                        this.getRoleList()
                    }else {
                        this.$message({
                            message:res.data.msg,
                            type:'success',
                            duration:1000
                        })
                    }
                })
            },
            //添加角色
            addRole() {
                let url = this.$baseUrl.baseUrl+"role/add"
                this.$axios.post(url,{
                    name:this.addRoleForm.name
                }).then(res=>{
                    if(res.data.code==200){
                        this.addDialogVisible=false,
                            this.$message({
                                message:res.data.msg,
                                type:'success',
                                duration:1000
                            })
                        this.getRoleList();
                    }else {
                        this.$message({
                            message:res.data.msg,
                            type:'error',
                            duration:1000
                        })
                    }
                })
            },
            //获得权限树
            initParentMun(){
                let url = this.$baseUrl.baseUrl+"permission/initAllMenu"
                this.$axios.get(url).then(res=>{
                    this.menuList=res.data.data;
                })
            },
            //获得角色列表
            getRoleList() {
                let url= this.$baseUrl.baseUrl+"role/list"
                this.$axios.get(url,{
                    params:{
                        name:this.name,
                        now:this.pageNum,
                        size:this.pageSize,
                    }
                }).then(res=>{
                    if(res.data.code=200){
                        this.roleList=res.data.data.list;
                        this.pageNum=res.data.data.pageNum;
                        this.pageSize=res.data.data.pageSize;
                        this.total=res.data.data.total;
                    }
                })
            },
            searchRole() {
                this.pageNum = 1;
                this.pageSize = 5;
                this.getRoleList();
            },
            handleSizeChange(newSize) {
                this.pageSize = newSize;
                this.getRoleList();
            },
            handleCurrentChange(newPage) {
                this.pageNum = newPage;
                this.getRoleList();
            },


        },
        created() {
            this.getRoleList();
            this.initParentMun();
        }
    };
</script>
<style lang="less" scoped>
</style>